<template>
    <div id="register">
        <div class="top">
            <div class="content">
                <ul>
                    <li :class="active==0?'active':''" @click="tabs(0)">手机号注册</li>
                    <li :class="active==1?'active':''" @click="tabs(1)">邮箱注册</li>
                </ul>
                <ol>
                    <!-- 手机号注册 -->
                    <li v-if="active == 0">
                        <div class="phoneNumber">
                            <div>手机号：</div>
                            <el-input v-model="phoneInput" placeholder="请输入11位手机号"></el-input>
                        </div>
                        <div class="phoneNumber">
                            <div>密码：</div>
                            <el-input v-model="phonePasswordInput" placeholder="请输入密码"></el-input>
                        </div>
                        <div class="phoneNumber">
                            <div>确认密码：</div>
                            <el-input v-model="phoneConfirmInput" placeholder="请再次输入密码"></el-input>
                        </div>
                        <div class="verification">
                            <div class="left">验证：</div>
                            <el-input v-model="phoneVerifyInput" placeholder="请输入验证码"></el-input>
                            <div class="right">{{phoneVerifyCode}}</div>
                        </div>
                        <div class="verificationCode">
                        <div class="left">验证码：</div>
                            <el-input v-model="phoneCodeInput" placeholder="请输入手机验证码"></el-input>
                            <div class="sendCode" v-if="phoneTimeShow" @click="phoneSendCode">发送验证码</div>
                            <div class="anewSendCode" v-if="!phoneTimeShow" @click="phoneSendCode">重新发送（{{phoneTime}}）</div>
                        </div>
                        <div class="agreement">
                            已阅读并同意<div>《用户服务协议》</div>和<div>《隐私协议》</div>
                        </div>
                        <div class="immediatelyRegister" @click="promptlyRegister">立即注册</div>
                        <div class="existing" @click="logIn">已有账号立即登录</div>
                    </li>
                    <li v-if="active == 1">
                        <!-- 邮箱注册 -->
                        <div class="phoneNumber">
                            <div>邮箱号：</div>
                            <el-input v-model="mailboxInput" placeholder="请输入邮箱号"></el-input>
                        </div>
                        <div class="phoneNumber">
                            <div>密码：</div>
                            <el-input v-model="mailboxPasswordInput" placeholder="请输入密码"></el-input>
                        </div>
                        <div class="phoneNumber">
                            <div>确认密码：</div>
                            <el-input v-model="mailboxConfirmInput" placeholder="请再次输入密码"></el-input>
                        </div>
                        <div class="verification">
                            <div class="left">验证：</div>
                            <el-input v-model="mailboxVerifyInput" placeholder="请输入验证码"></el-input>
                            <div class="right">{{mailboxVerifyCode}}</div>
                        </div>
                        <div class="verificationCode">
                        <div class="left">验证码：</div>
                            <el-input v-model="mailboxCodeInput" placeholder="请输入邮箱验证码"></el-input>
                            <div class="sendCode" v-if="mailboxTimeShow" @click="mailboxSendCode">发送验证码</div>
                            <div class="anewSendCode" v-if="!mailboxTimeShow" @click="mailboxSendCode">重新发送（{{mailboxTime}}）</div>
                        </div>
                        <div class="agreement">
                            已阅读并同意<div>《用户服务协议》</div>和<div>《隐私协议》</div>
                        </div>
                        <div class="immediatelyRegister" @click="registerSuccess">立即注册</div>
                        <div class="existing" @click="logIn">已有账号立即登录</div>
                    </li>
                </ol>
                <!-- 成功提示 -->
                <div class="successPrompt" v-if="successPrompt">
                    <img src="../image/chenggong.png" alt="">
                    <div class="hint">恭喜您，注册成功</div>
                    <div class="perfect">为了您享受到更好的服务，请您完善资料</div>
                    <div class="dotted"></div>
                    <div class="jump" @click="perfectData">完善资料！立即跳转（{{successPromptTime}}）</div>
                </div>
            </div>
        </div>
        <!-- 空白 -->
        <div class="null"></div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            active:0, // 切换选项卡
            // 手机号注册
            phoneInput: "", // 输入的手机号
            phonePasswordInput: "", // 输入的密码
            phoneConfirmInput: "", // 输入的确认密码
            phoneVerifyInput: "", // 输入的验证码
            randomCode: "", // 随机产生的图形码
            phoneVerifyCode: "", // 验证的图形码
            phoneCodeInput: "", // 输入的手机验证码
            phoneTime: 60,
            phoneTimeShow: true, // 控制验证码的显示隐藏
            // 邮箱注册
            mailboxInput: "", // 输入的手机号
            mailboxPasswordInput: "", // 输入的密码
            mailboxConfirmInput: "", // 输入的确认密码
            mailboxVerifyInput: "", // 输入的验证码
            mailboxVerifyCode: "3h69", // 验证的图形码
            mailboxCodeInput: "", // 输入的手机验证码
            mailboxTime: 60,
            mailboxTimeShow: true, // 控制验证码的显示隐藏
            // 成功提示
            successPromptTime: 3,
            successPrompt: false,// 控制提示的显示隐藏
		};
	},
    mounted(){
        this.getRandomCode() // 获取随机产生的图形码
    },
	methods: {
        // 切换选项卡
        tabs(index){
            this.active = index
        },
        // 获取随机产生的图形码
        getRandomCode(){
            let random = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B','C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            for (let i = 0; i < 4; i++) {
                let index = Math.floor(Math.random() * 35);//设置随机数范围,这设置为0 ~ 36
                this.randomCode += random[index];//字符串拼接：将每次随机的字符进行拼接
            }
            this.getVerifyCode()
        },
        // 
        getVerifyCode(){
            console.log(this.randomCode)
            this.$request.getVerifyCode({
                imgcodeid: this.randomCode,
            }).then(res=>{ //获取路由
                console.log(res)
            })
        },
        // 手机号注册点击发送验证码
        phoneSendCode(){
			// console.log("手机号注册发送验证码")
            this.phoneTimeShow = false
            this.timer = setInterval(()=>{
                this.phoneTime--
                if(this.phoneTime === 0){
                    this.phoneTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
        // 邮箱注册点击发送验证码
        mailboxSendCode(){
			// console.log("邮箱注册发送验证码")
            this.mailboxTimeShow = false
            this.timer = setInterval(()=>{
                this.mailboxTime--
                if(this.mailboxTime === 0){
                    this.mailboxTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
		// 点击跳转到登录页面
		logIn(){
			// console.log("跳转到登录页面")
			this.$router.push("/logIn")
		},
        // 注册成功提示
        promptlyRegister(){
            // console.log("注册成功提示")
            this.$request.getRegister({
                username: this.phoneInput,
                password: this.phonePasswordInput,
                confirm_password: this.phoneConfirmInput,
                verif_code: this.phoneVerifyInput,
            }).then(res=>{ //获取路由
                console.log(res)
                // 注册成功的提示，并跳转到基本信息页面
                this.successPrompt = true
                this.timer = setInterval(()=>{
                    this.successPromptTime--
                    if(this.successPromptTime === 0){
                        this.successPrompt = false
                        this.successPromptTime = 3
                        clearInterval(this.timer)
                        // this.$router.push("/menu/modifyInformation")
                    }
                },1000)
            })
        },
		// 点击跳转到个人信息页面
		perfectData(){
			// console.log("跳转到个人信息页面")
			this.$router.push("/menu/modifyInformation")
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #register{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 800px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size:cover;
            .content{
                width: 30%;
                margin-left: 60%;
                border-radius: 20px;
                overflow: hidden;
                background: url("../image/background.png") no-repeat 100%;
                position: relative;
                ul{
                    display: flex;
                    .active{
                        // background: url("../image/xuanzhong.png") no-repeat 100%;
                        background: #F29418;
                    }
                    li{
                        flex: 1;
                        line-height: 50px;
                        text-align: center;
                        font-size: 20px;
                        color: white;
                        background: url("../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                ol{
                    width: 100%;
                    li{
                        padding: 7%;
                        color: #666;
                        // 手机号
                        .phoneNumber{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            div{
                                flex: 1;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                        }
                        // 验证
                        .verification{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .right{
                                margin-left: 3%;
                                flex: 3;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 1px dotted #ccc;
                            }
                        }
                        // 验证码
                        .verificationCode{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .sendCode{
                                margin-left: 3%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 18px;
                                color: white;
                                background: #F29418;
                            }
                            .anewSendCode{
                                margin-left: 3%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 18px;
                                color: white;
                                background: url("../image/weixuanzhong.png") no-repeat 100%;
                            }
                        }
                        // 协议
                        .agreement{
                            display: flex;
                            justify-content: center;
                            margin-top: 10%;
                            div{
                                color: #F29418;
                            }
                        }
                        // 立即注册按钮
                        .immediatelyRegister{
                            width: 100%;
                            text-align: center;
                            line-height: 50px;
                            font-size: 18px;
                            color: white;
                            margin: 5% 0%;
                            background: #F29418;
                        }
                        // 
                        .existing{
                            display: flex;
                            justify-content: center;
                            color: #F29418;
                        }
                    }
                }
                // 成功提示
                .successPrompt{
                    width: 100%;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    overflow: hidden;
                    background: url("../image/background.png") no-repeat 100%;
                    text-align: center;
                    position: absolute;
                    top: 10%;
                    left: 0%;
                    img{
                        width: 15%;
                        margin-top: 20%;
                    }
                    .hint{
                        font-size: 20px;
                        margin: 2% 0% 12% 0%;
                    }
                    .perfect{
                        color: #ccc;
                    }
                    .dotted{
                        border-top: 2px dotted #ccc;
                        margin: 7% 0% 7% 0%;
                    }
                    .jump{
                        color: #F29418;
                        margin-bottom: 44%;
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 104px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}



@media screen and (max-width: 1400px){    
    #register{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 750px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size:cover;
            .content{
                width: 26%;
                margin-left: 55%;
                border-radius: 20px;
                overflow: hidden;
                background: url("../image/background.png") no-repeat 100%;
                position: relative;
                ul{
                    display: flex;
                    .active{
                        // background: url("../image/xuanzhong.png") no-repeat 100%;
                        background: #F29418;
                    }
                    li{
                        flex: 1;
                        line-height: 40px;
                        text-align: center;
                        font-size: 18px;
                        color: white;
                        background: url("../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                ol{
                    width: 100%;
                    li{
                        padding: 5%;
                        color: #666;
                        // 手机号
                        .phoneNumber{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            div{
                                flex: 1;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                        }
                        // 验证
                        .verification{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .right{
                                margin-left: 2%;
                                flex: 3;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 1px dotted #ccc;
                            }
                        }
                        // 验证码
                        .verificationCode{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .sendCode{
                                margin-left: 2%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 16px;
                                color: white;
                                background: #F29418;
                            }
                            .anewSendCode{
                                margin-left: 3%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 16px;
                                color: white;
                                background: url("../image/weixuanzhong.png") no-repeat 100%;
                            }
                        }
                        // 协议
                        .agreement{
                            display: flex;
                            justify-content: center;
                            margin-top: 8%;
                            div{
                                color: #F29418;
                            }
                        }
                        // 立即注册按钮
                        .immediatelyRegister{
                            width: 100%;
                            text-align: center;
                            line-height: 40px;
                            font-size: 16px;
                            color: white;
                            margin: 4% 0%;
                            background: #F29418;
                        }
                        // 
                        .existing{
                            display: flex;
                            justify-content: center;
                            color: #F29418;
                        }
                    }
                }
                // 成功提示
                .successPrompt{
                    width: 100%;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    overflow: hidden;
                    background: url("../image/background.png") no-repeat 100%;
                    text-align: center;
                    position: absolute;
                    top: 10%;
                    left: 0%;
                    img{
                        width: 15%;
                        margin-top: 16%;
                    }
                    .hint{
                        font-size: 18px;
                        margin: 2% 0% 10% 0%;
                    }
                    .perfect{
                        color: #ccc;
                    }
                    .dotted{
                        border-top: 2px dotted #ccc;
                        margin: 6% 0% 6% 0%;
                    }
                    .jump{
                        color: #F29418;
                        margin-bottom: 40%;
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 98px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}
</style>